﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <c:set var="ctx" value="${pageContext.request.contextPath}" />
        <html>

        <head>
            <link rel="stylesheet" href="${ctx}/common/common.css">
            <title>Title</title>
            <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
            <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
            <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

            <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
            <style>
                .layui-body {
                    overflow-y: scroll;
                }
            </style>
        </head>

        <body>
            <!--主体内容层-->
            <div class="layui-fluid">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12 layui-col-space15">
                        <form>
                            <!--输入框内容盒子-->
                            <div class="layui-col-md12">
                                <!--输入框-->
                                <div class="layui-col-md3">
                                    <label class="layui-form-label">产品名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="productName" id="productName" required
                                            lay-verify="required" placeholder="请输入产品名称" autocomplete="off"
                                            class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <!--通用按钮盒子-->
                            <div class="layui-col-md12" style="padding-top: 10px;padding-bottom: 10px">
                                <!--通用table表格-->
                                <div class="layui-btn-group demoTable">
                                    <button class="layui-btn layui-btn-sm" type="button" data-type="addProduct">
                                        <i class="layui-icon">&#xe654;</i>
                                    </button>
                                    <!--删除-->
                                    <button class="layui-btn layui-btn-sm" type="button" data-type="delProductSelect">
                                        <i class="layui-icon">&#xe640;</i>
                                    </button>
                                </div>
                                <div style="float: right;" class="layui-btn-group paramBtn">
                                    <button data-type="reloadProduct" type="button"
                                        class="layui-btn layui-btn-sm layui-btn-danger">
                                        查询
                                    </button>
                                    <button data-type="resetProduct" type="reset"
                                        class="layui-btn layui-btn-sm layui-btn-danger">
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>

                        <table class="layui-table" id="productReload"
                            lay-data="{ url:'${ctx}/products/findProductPage', page:true,groups:5}" lay-filter="demo">
                            <thead>
                                <tr>
                                    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                                    <th lay-data="{field:'name',sort:true,width:100}">产品名称</th>
                                    <th lay-data="{field:'pro_cla_name',sort:true,width:100}">产品类型</th>
                                    <th lay-data="{field:'specifications',sort:true,width:70}">规格</th>
                                    <th lay-data="{field:'standard_num',sort:true,width:70}">产品标识码</th>
                                    <th lay-data="{field:'shelf_life',sort:true,width:70}">保质期</th>
                                    <th lay-data="{field:'traceability_name',sort:true,width:70}">溯源类型</th>
                                    <th lay-data="{field:'perf_standard',sort:true,width:70}">执行标准</th>
                                    <th
                                        lay-data="{field:'into_production_time',sort:true,width:130 ,templet:'#createTime'}">
                                        投产时间</th>
                                    <th lay-data="{field:'capacity',sort:true,width:80}">容量</th>
                                    <th lay-data="{field:'weight',sort:true,width:80}">重量</th>
                                    <th lay-data="{field:'process_num',sort:true,width:80}">工序数</th>
                                    <th lay-data="{field:'trademark_num',width:130,sort:true}">商标号</th>
                                    <th lay-data="{field:'right',width:400,toolbar:'#barDemo'}">操作</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
                <a class="layui-btn layui-btn-sm" lay-event="sermigood">关联半成品</a>
                <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="material">关联物料</a>
            </script>
            <script id="createTime" type="text/html">
                {{# return layui.getDate(d.create_time, 'yyyy-MM-dd hh:mm:ss');}}
            </script>
        </body>
        <script>
            layui.use('table', function () {
                var loading = layer.msg("数据加载中...");
                var table = layui.table;
                table.render({
                    done: function () {
                        layer.close(loading);
                    }
                })
                //监听filter为demo的table中的工具条
                table.on('tool(demo)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'detail') {
                        window.location.href = '${ctx}/products/view/' + obj.data.id;
                    } else if (obj.event === 'del') {
                        layer.confirm('确认删除?', function (index) {
                            obj.del();
                            layer.close(index);
                            $.post("${ctx}/products/delete", { productIds: obj.data.id }, function (data) {
                                if (data == '1') {
                                    layer.alert("删除成功");
                                    table.reload('productReload', {
                                        where: {
                                            productName: ''
                                        }
                                    })
                                } else {
                                    layer.alert("删除失败");
                                }
                            }, "text")

                        });
                    } else if (obj.event === 'edit') {
                        window.location.href = '${ctx}/products/update/' + obj.data.id
                    } else if (obj.event === 'sermigood') {
                        window.location.href = '${ctx}/products/toSermigood/' + obj.data.id
                    } else if (obj.event === 'material') {
                        window.location.href = '${ctx}/products/toMaterial/' + obj.data.id
                    }
                });

                var $ = layui.$, active = {
                    reloadProduct: function () {//条件查询
                        var productName = document.getElementById("productName").value;
                        table.reload('productReload', {
                            where: {
                                productName: productName
                            }
                        });
                    },
                    resetProduct: function () {
                        table.reload('productReload', {
                            where: {
                                productName: '',
                            }
                        })
                    },
                    addProduct: function () {
                        window.location.href = '${ctx}/products/create'
                    },
                    delProductSelect: function () {
                        var checkStatus = table.checkStatus('productReload')
                        var ids = '';
                        var data = checkStatus.data;
                        for (var i in data) {
                            ids += data[i].id + ",";

                        }
                        if (ids == '') {
                            layer.alert("请选择删除行");
                            return false;
                        }
                        layer.confirm('确认删除?', function (index) {
                            layer.close(index);
                            $.post("${ctx}/products/delete", { productIds: ids }, function (data) {
                                if (data == '1') {
                                    layer.alert("删除成功");
                                    table.reload('productReload', {
                                        where: {
                                            productName: ''
                                        }
                                    })
                                } else {
                                    layer.alert("删除失败");
                                }
                            }, "text")
                        })
                    }


                };

                $('.demoTable .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
                //给按钮绑定active中的方法
                $(".paramBtn .layui-btn").on("click", function () {
                    var type = $(this).data('type');
                    //查看是active这个json中是否有type这个方法，如果有调用，如果没有不知心；
                    active[type] ? active[type].call() : '';
                })

            });
        </script>

        </html>